import { classNames } from 'shared/lib/classNames/classNames'
// import { BugButton } from 'app/providers/ErrorBoundary'
import cls from './Sidebar.module.scss'
import { AppLink, AppLinkTheme } from 'shared/UI/AppLink/AppLink'
import { useTranslation } from 'react-i18next'
import { navIcons } from 'shared/config/routeConfig/routeConfig'
import { Switchers } from 'features/Switchers'

interface SidebarProps {
    className?: string,
    navLinks: Record<string, string>,
    state: boolean
}

export default ({ className, navLinks, state }: SidebarProps) => {
    const { t } = useTranslation('navigation') 

    return (
        <div
            data-testid="sidebar"
            className={classNames(cls.sidebar, { [cls.collapsed]: state }, [className])}
        >
            <ul>
                {
                    Object.keys(navLinks).map((key) =>
                        <li>
                            <AppLink theme={AppLinkTheme.PRIMARY} to={key}>{navIcons[key]}</AppLink>
                            <AppLink theme={AppLinkTheme.PRIMARY} to={key}>{t(navLinks[key])}</AppLink>
                        </li>
                    )
                }
                
            </ul>
            <Switchers />
        </div>
    )
}
